<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><sitemesh:write property='title' /></title>
    <!-- styles -->
    <link type="text/css" href="${ctx}/resource/css/bootstrap.min.css" rel="stylesheet" >
    <link type="text/css" href="${ctx}/resource/css/bootstrap-responsive.min.css" rel="stylesheet" >
    <!-- javascript -->
    <script type="text/javascript" src="${ctx}/resource/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="${ctx }/resource/js/jquery.validate.js"></script>
    <script type="text/javascript" src="${ctx }/resource/js/bootstrap.min.js"></script>
    <c:if test="${sessionScope.cn_weibo_user == null}">
        <script type="text/javascript">
            $.validator.addMethod("regexmatch", function(value, element, params) {
                return params.test(value);
            });
            $(document).ready(function() {
                var validator = $("#registerForm").validate({
                    rules : {
                        account : {
                            required : true,
                            minlength : 6,
                            maxlength : 20,
                            regexmatch : /^[a-zA-Z]+\d*\_*$/,
                            remote: {
                                url: "${ctx}/users/checkAccount" ,
                                type: "post",
                                data: {
                                    account: function() {
                                        return $("#inputAccount").val();
                                    }
                                },
                                dataFilter: function(data) {
                                    var valid = $.parseJSON(data).checkAccountFlag;
                                    if(!valid) {
                                        return "\"用户名已存在\"";
                                    } else {
                                        return "true";
                                    }
                                }
                            }
                        },
                        userName : {
                            required : true,
                            minlength : 2,
                            maxlength : 12
                        },
                        password : {
                            required : true,
                            minlength : 6,
                            maxlength : 30
                        },
                        email : {
                            required : false,
                            email : true,
                            maxlength : 60
                        },
                        gender : {
                            required : true
                        },
                        introduce : {
                            required : false,
                            maxlength : 140
                        }
                    },
                    messages : {
                        account : {
                            required : "帐号为必填项",
                            minlength : "长度不能小于6位",
                            maxlength : "长度不能大于20位",
                            regexmatch : "以字母开头，只能包含字母、数字、下划线"
                        },
                        userName : {
                            required : "名称为必填项",
                            minlength : "长度不能小于2位",
                            maxlength : "长度不能大于12位"
                        },
                        password : {
                            required : "密码为必填项",
                            minlength : "长度不能小于6位",
                            maxlength : "长度不能大于12位"
                        },
                        email : {
                            email : "Email格式不正确",
                            maxlength : "长度不能大于60位"
                        },
                        gender : {
                            required : "性别为必填项"
                        },
                        introduce : {
                            maxlength : "介绍长度不大于140位"
                        }
                    }
                });
                $("#closeBtn").click(function() {
                    validator.resetForm();
                });
                $("#submitBtn").click(function() {
                    if (validator.form()) {
                        $("#registerForm").submit();
                    }
                });
            });
        </script>
    </c:if>
    <sitemesh:write property='head' />
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".nav-collapse"> <span class="icon-bar"></span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span>
            </a> <a class="brand" href="${pageContext.request.contextPath}">Small-WeiBo</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="${ctx}">我的主页</a></li>
                    <li><a href="#">找人</a></li>
                    <li><a href="#">广场</a></li>
                    <li><a href="#">实验室</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                                            data-toggle="dropdown">应用<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="nav-header">应用</li>
                            <li class="divider"></li>
                            <li><a href="#">应用1</a></li>
                            <li><a href="#">应用2</a></li>
                            <li><a href="#">应用3</a></li>
                        </ul></li>
                </ul>
                <form class="navbar-search pull-right" action="">
                    <input type="text" class="search-query span2" placeholder="搜用户/广播" />
                </form>
                <ul class="nav pull-right">
                    <li><a href="#"><i class="icon-th-large"></i></a></li>
                    <li><a href="#"><i class="icon-envelope"></i></a></li>
                    <li><a href="#"><i class="icon-user"></i></a></li>
                    <c:if test="${sessionScope.cn_weibo_user == null}">
                        <li class="">
                            <a data-toggle="modal" href="#registerModal">
                                <i class="icon-plus"></i>注册
                            </a>
                        </li>
                    </c:if>
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                                            data-toggle="dropdown">用户名<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">设置</a></li>
                            <li><a href="#">博客</a></li>
                            <li class="divider"></li>
                            <li><a href="#">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.nav-collapse -->
        </div>
    </div>
</div>


<c:if test="${sessionScope.cn_weibo_user == null}">
    <div id="registerModal" class="modal hide" data-backdrop="static">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>用户资料</h3>
        </div>
        <div class="modal-body">
            <form id="registerForm" action="${ctx}/users/register" method="POST" class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputAccount"
                           style="width: 80px">帐号<span style="color: red; ">*</span></label>
                    <div class="controls" style="margin-left: 100px">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-plus-sign"></i></span>
                            <input type="text" id="inputAccount" name="account" placeholder="帐号"
                                   class="required: true minlength:6 maxlength:20" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputUserName"
                           style="width: 80px">名称<span style="color: red; ">*</span></label>
                    <div class="controls" style="margin-left: 100px">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-user"></i></span>
                            <input type="text" id="inputUserName" name="userName" placeholder="名称" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword"
                           style="width: 80px">密码<span style="color: red; ">*</span></label>
                    <div class="controls" style="margin-left: 100px">
                        <div class="input-prepend">
                            <input type="password" id="inputPassword" name="password" placeholder="密码" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputGenderMale" style="width: 80px">性别<font
                            color="red">*</font></label>
                    <div class="controls" style="margin-left: 100px">
                        <div class="input-prepend">
                            <label class="radio" style="display: inline-block;"> <input
                                    type="radio" name="gender" id="inputGenderMale" value="1" /> 男
                            </label> <label class="radio" style="display: inline-block;"> <input
                                type="radio" name="gender" id="inputGenderFemale" value="0" /> 女
                        </label>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputEmail" style="width: 80px">Email</label>
                    <div class="controls" style="margin-left: 100px">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-envelope"></i></span>
                            <input type="text" id="inputEmail" name="email"
                                   placeholder="Email" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputIntroduce" style="width: 80px">简介</label>
                    <div class="controls" style="margin-left: 100px">
                        <div class="input-prepend">
                            <textarea rows="3" name="introduce" id="inputIntroduce"></textarea>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button id="closeBtn" class="btn" data-dismiss="modal"
                    aria-hidden="true">关闭</button>
            <button id="submitBtn" class="btn btn-primary">提交</button>
        </div>
    </div>
</c:if>
<sitemesh:write property='body'/>
</body>
</html>